<template>
	<view class="Administration">
		<view class="search">
			<u-search placeholder="搜索" v-model="serach.name" @search="onSerach" @clear="initPage()" shape='square' :show-action='false' style="width: 100%;">
			</u-search>
			<view class="add ml-20" @click="add">
				<view class="iconfont iconfont-e7a7 c-329 u-font-32"></view>
				<text class="ml-10 ">新增</text>
			</view>
		</view>
		<view class="box" v-for="(item,index) in dataList" :key='index'>
			<view class="box-title">
				<view class="title-left">
					<text class="u-fon-28 fw-bold ">仓库名称:{{item.name}}</text>
				</view>
				<view class="title-right">
					<text class="edit" @click="Edit(index)">编辑</text>
					<text class="del" @click="del(index)">删除</text>
				</view>
			</view>
			<view class="table-item">
				<text class="item-title">编号:</text>
				<text class="item-cont">{{item.number}}</text>
			</view>
			<view class="table-item">
				<text class="item-title">地址:</text>
				<text class="item-cont">{{item.address}}</text>
			</view>
			<view class="table-item">
				<text class="item-title">状态:</text>
				<text class="item-cont" :class="[item.status == 1?'Enable':'Disable']">{{item.status == 1?'启用':'禁用'}}</text>
			</view>
		</view>
		<u-modal v-model="show" :content="content" show-cancel-button :show-title='false' @confirm="onDel"></u-modal>
		<sww-load-more :params="dataListParams" @load='loadMore'></sww-load-more>
	</view>
</template>

<script>
	import {
		GetQueryDataList,
		DeleteManagerData
	} from '@/common/http.request.js'
	import {
		mapState,
		mapActions
	} from 'vuex';
	import {pagingMixin} from'@/mixins/sysPaging.js'
	export default {
		mixins:[pagingMixin],
		data() {
			return {
				dataList: {},
				serach:{
					name:''
				},
				delindex:0,
				show: false,
				content: '确定删除这个仓库吗'
			}
		},
		computed: {
			...mapState(['vuex_adminuser'])
		},
		onLoad() {
		},
		onShow(){
			this.initPage()
		},
		onReachBottom: function() {
			this.loadMore();
		},
		methods: {
			initPage(params) {
				this._init_data('',{
					fk_business_id: this.vuex_adminuser.pk_id,
					...params
				},{name:'e_product_warehouse'})
				// GetQueryDataList('e_product_warehouse', 1, 12, {
				// 	fk_business_id: this.vuex_adminuser.pk_id,
				// 	...params
				// }).then(res => {
				// 	// console.log(res)
				// 	this.dataList = res.data
				// })
			},
			loadMore() {
				this._load_data()
			},
			onSerach(val){
				// console.log(val)
				this.initPage(this.serach)
			},
			del(idx) {
				this.show = true
				this.delindex = idx;
			},
			onDel(){
				DeleteManagerData(86,this.dataList[this.delindex].pk_id)
				this.initPage()
			},
			add(){
				this.$linkTo('/package/system/erp/warehouse/addwarehouse')
			},
			Edit(idx){
				this.$linkTo(`/package/system/erp/warehouse/addwarehouse?index=${idx}`)
			}
		}
	}
</script>
<style>
	page {
		background-color: #f5f5f5;
	}
</style>
<style lang="scss" scoped>
	.Administration {
		.ml-20 {
			margin-left: 20rpx;
		}

		.c-329 {
			color: #3297ef;
		}

		.Enable {
			color: #ff9d0e;
		}

		.Disable {
			color: #999999;
		}

		.ml-10 {
			margin-left: 10rpx;
		}

		.search {
			display: flex;
			align-items: center;
			padding: 20rpx 30rpx;
			background-color: #fff;
			border-top: 1rpx solid #f9f9f9;

			.add {
				display: flex;
				align-items: center;
				width: 120rpx;

			}
		}

		.box {
			width: 690rpx;
			background-color: #fff;
			padding: 20rpx 30rpx;
			margin: 20rpx 30rpx;
			border-radius: 10rpx;

			.box-title {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 20rpx;
				padding-bottom: 20rpx;
				border-bottom: 1px solid #eeeeee;

				.title-left {}

				.title-right {
					.edit {
						color: #3297ef;
						margin-right: 20rpx;
					}

					.del {
						color: #ff3636;

					}
				}
			}

			.table-item {
				width: 100%;
				display: flex;
				align-items: center;
				padding-bottom: 20rpx;

				.item-title {}

				.item-cont {
					margin-left: 20rpx;
				}
			}
		}
	}
</style>
